<template>
  <table class="TableRank" cellspacing="0" cellpadding="0" border="0">
    <colgroup>
      <col width="100">
      <col style="width: 30%;">
      <col style="width: 30%;">
      <col>
    </colgroup>
    <tr class="TableRank--header">
      <td class="TableRank--header__label one-line" v-for="key in sortKeysArr" :key="key">
        <div class="tdContainer">
          <div class="tdContainer--label">
            {{ options.labelMapKey[key] }}
          </div>
        </div>
      </td>
    </tr>
    <tr class="TableRank--row" v-for="(item, index) in options.tableArr" :key="index">
      <td class="TableRank--row__col one-line" v-for="key in sortKeysArr" :key="key">
        <!-- 索引 -->
        <template v-if="key === 'index'">
          <div class="tdContainer">
            <div class="rankIndex" :class="{ red: index === 0, blue: index === 1, purple: index === 2 }">
              {{ index + 1 }}
            </div>
          </div>
        </template>
        <!-- 非索引 -->
        <div class="tdContainer" v-else>
          <div class="tdContainer--label">
            {{ item[key] }}
          </div>
        </div>
      </td>
    </tr>
  </table>
</template>

<script setup >
import { reactive, watch, onMounted } from 'vue'

const props = defineProps({
  options: {
    type: Object,
    default() {
      return {
        tableArr: [
          {
            date: '2018/01/02',
            name: '海康威视海康威视海康威视',
            address: '杭州市滨江区阡陌路555号'
          },
          {
            date: '2018/01/04',
            name: '海康威视',
            address: '杭州市滨江区阡陌路555号'
          },
          {
            date: '2018/01/01',
            name: '海康威视',
            address: '杭州市滨江区阡陌路555号'
          },
          {
            date: '2018/01/03',
            name: '海康威视',
            address: '杭州市滨江区阡陌路555号'
          },
          {
            date: '2018/01/03',
            name: '海康威视',
            address: '杭州市滨江区阡陌路555号'
          }
        ],
        labelMapKey: {
          index: '排行',
          name: '名字',
          date: '日期',
          address: '地址',
        },
        sortKeys: [
          'date'
        ]
      }
    }
  }
})
const sortKeysArr = Object.keys(props.options.labelMapKey)


</script>

<style scoped lang="scss">
table.TableRank {
  table-layout: fixed;
  padding: 24px;
  width: 100%;
  height: 100%;

  tr {
    height: 54px;
    line-height: 44px;

    &.TableRank--header {
      width: 892px;
      background: #E6E6E6;
      border-radius: 4px 4px 0px 0px;

      td {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        font-weight: bold;
      }
    }

    &.TableRank--row {
      td {
        border-bottom: 1px solid #E9E9E9;
      }
    }

    td {
      min-width: 0;
      box-sizing: border-box;
      padding: 6px 0;
      text-overflow: ellipsis;
      vertical-align: middle;

      .tdContainer {
        position: relative;
        box-sizing: border-box;
        padding-right: 12px;
        padding-left: 12px;
        vertical-align: middle;
        word-break: break-all;
        word-break: break-word;
        min-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &--label {
          overflow: hidden;
          max-width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .rankIndex {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #F0F2F5;
    color: #455E7F;
    text-align: center;
    line-height: 24px;

    &.red {
      background-color: #F2637B;
      color: #FFFFFF;
    }

    &.blue {
      background-color: #3AA0FF;
      color: #FFFFFF;
    }

    &.purple {
      background-color: #9270CA;
      color: #FFFFFF;
    }
  }
}
</style>